<!DOCTYPE html>
<html lang="zh">
<head>
    {include file='common/meta'}
    <style>
        .lyear-wrapper {
            position: relative
        }

        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important
        }

        .login-center {
            background: #fff;
            min-width: 38.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 5px;
            margin: 2.85714em 0
        }

        .login-header {
            margin-bottom: 1.5rem !important;
        }

        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px
        }

        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }

        body {
            background-image: url("__BACKEND__/img/loginbg.jpg");
            background-size: cover;
        }

        .login-center .has-feedback {
            margin-bottom: 30px;
        }
        #captcha {
            display: inline-block;
            width: 60%;
        }
    </style>
</head>

<body>
<div class="row lyear-wrapper">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <a href="javascript:;"><img alt="傲杰管理系统" style="max-height: 75px"
                                            src="__BACKEND__/img/logo_icon.svg"></a>
            </div>
            <form class="form-horizontal" data-toggle="validator" method="POST" role="form" data-loading="3">
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="请输入您的用户名" data-rule="required" data-form-label="用户名"
                           class="form-control" name="user_name" id="username"/>
                    <i class="fa fa-user form-control-feedback" aria-hidden="true"></i>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="请输入密码" data-rule="required" data-form-label="密码"
                           class="form-control" id="password" name="password"/>
                    <i class="fa fa-lock form-control-feedback" aria-hidden="true"></i>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="text" name="captcha" class="form-control captcha" data-rule="required"
                           data-form-label="验证码"
                           placeholder="验证码" id="captcha">
                    <i class="fa fa-shield form-control-feedback" aria-hidden="true"></i>
                    <img src="{:captcha_src()}" class="pull-right captcha-img" id=""
                         style="cursor: pointer;width: 120px;height: 38px"
                         onclick="this.src='/captcha.html/s/'+Math.random()" title="点击刷新" alt="captcha">
                </div>
                <div class="form-group feedback-left">
                    <label for="keep_login" class="lyear-checkbox checkbox-info m-t-10" style="cursor: pointer;">
                        <input type="checkbox"  value="1" id="keep_login" name="keep_login" style="cursor: pointer;display: none"><span>记住我,下次自动登录</span>
                    </label>
                </div>
                <div class="form-group">
                    <button class="btn btn-block btn-primary" type="submit">立即登录</button>
                </div>
            </form>
            <hr>
            <footer class="col-sm-12 text-center">
                <p class="m-b-0">傲杰笔记管理系统<a href="https://www.52zsj.com/">www.52zsj.com</a>.</p>
            </footer>
        </div>
    </div>
</div>
{include file='common/script'/}
</body>
</html>
